<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D变换效果</title>
    <style>
        html,body{
            height: 100%;

        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        div{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        div:hover{
            /*translate() 用来实现平移变换效果*/
            /*transform: translate(50px,50px);*/

            /*rotate() 旋转变换*/
            transform: rotate(30deg);

            /*围绕x轴旋转.*/
            transform: rotateX(30deg);
            /*执行多个变换效果.*/
            transform: skew(10deg,0) rotateX(30deg);

            /*scale() 缩放变换.值是缩放到的比例.*/
            /*transform: scale(0.8);*/

            /*skew() 倾斜变换*/
            /*transform: skew(0 ,30deg);*/

            /*matrix() 矩阵变换,使用更加基础的方式设置变换效果*/
            /*transform: matrix(0,0,0,0.6,0,0)*/
        }
    </style>
</head>
<body>
    <div>
        
    </div>
</body>
</html>